<template>
	<view class="comments-container">
		<view class="comment-content" v-for="item in commentList" :key="item.comment_id">
			<CommentBox :commentData="item" @commentReply="commentReply"></CommentBox>
		</view>
		<uni-load-more :contentText="{contentnomore:'没有更多评论内容了'}"
			v-if="commentList.length === 0 || commentList.length < 5" :status="Loading"></uni-load-more>
		<CommentMasker :showPopup="showPopup" @cancle="hadnleCancle" @sendComment="sendComment"></CommentMasker>
	</view>
</template>

<script>
	export default {
		//获取文章id和文章评论列表
		onLoad(props) {
			this.articleIds = props.id;
			this.getCommentsList()
		},
		//下滑到底时
		onReachBottom() {
			if (this.Loading === 'noMore') return
			this.limit++
			this.getCommentsList()
		},
		data() {
			return {
				articleIds: '',
				pageSize: 5,
				limit: 1,
				commentList: [],
				Loading: 'loading',
				showPopup: false,
				replyData: {},
			}
		},
		methods: {
			//获取评论数据
			async getCommentsList() {

				//获取对应条数的评论
				const listArr = await this.$http.get_comment_list({
					articleId: this.articleIds,
					pageSize: this.pageSize,
					limit: this.limit
				})
				//已经没有更多数据了
				if (listArr.length === 0) {
					this.Loading = 'noMore'
				}
				//防止覆盖之前评论的展示，需要进行一个重新赋值
				let oldList = JSON.parse(JSON.stringify(this.commentList))
				oldList.push(...listArr)
				this.commentList = oldList
			},
			//评论回复
			async commentReply(data) {
				await this.checkedisLogin()
				this.replyData = {
					comment_id: data.comment.comment_id,
					is_reply: data.isReply
				}
				data.comment.reply_id && (this.replyData.reply_id = data.comment.reply_id)
				this.showPopup = true
			},
			//取消输入
			hadnleCancle() {

				this.replyData = {}
				this.limit = 1
				this.Loading = 'loading'
				this.commentList = []
				this.getCommentsList()
				this.showPopup = false;
			},
			//确认发布
			async sendComment(data) {
				await this.$http.updata_comment_data({
					userId: this.userInfo._id,
					articleId: this.articleIds,
					commentData: data,
					...this.replyData
				})
				uni.showToast({
					title: "评论发布成功",
					icon: "success"
				})


				this.replyData = {}
				this.limit = 1
				this.Loading = 'loading'
				this.commentList = []
				this.showPopup = false
				this.getCommentsList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comments-container {
		background-color: #fff;

		.comment-content {
			padding: 0 30rpx;
			border-bottom: 1px solid #ddd;
		}
	}
</style>
